<template>
  <button class="dui-switch" :class="{ 'dui-checked': value }" @click="toggleCheck">
    <span></span>
  </button>
</template>

<script lang="ts">
export default {
  props: {
    value: Boolean,
  },
  setup (props, context) {
    const toggleCheck = () => {
      context.emit('update:value', !props.value);
    }

    return { toggleCheck }
  }
}
</script>

<style lang="scss">
  @import '../styles/util';

  $h: 22px;
  $h2: $h - 4px;

  .dui-switch {
    position: relative;
    height: $h;
    width: $h * 2;
    border: none;
    background-color: $bg-disabled;
    border-radius: $h / 2;

    &.dui-checked {
      background-color: $brand-primary;

      > span {
        left: calc(100% - #{$h2} - 2px);
      }
    }

    &:active {
      > span { width: $h2 + 4px; }
    }

    &.dui-checked:active {
      > span { width: $h2 + 4px; margin-left: -4px; }
    }

    &:focus {
      outline: none;
    }

    span {
      position: absolute;
      top: 2px;
      left: 2px;
      height: $h2;
      width: $h2;
      background-color: white;
      border-radius: $h2 / 2;
      transition: all 250ms;
    }
  }
</style>